<template>
    <!-- 企业详情 -->
    <div class="companyDetail">
        <div style="height:2px;background-color: #F5F6F7;"></div>
        <DetailNav :title="dataAll.contactsEnterpriseName">
            <template v-slot:back>
                <el-button @click="back" size="small" icon="el-icon-arrow-left"></el-button>
            </template>
        </DetailNav>
        <div style="height:15px;background-color: #F5F6F7;"></div>
        <div class="contentTable ffffff padding15All">
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="企业信息" name="first">
                    <Info type="company" :value="dataAll">
                        <template v-slot:edit>
                            <el-button @click="dialogFormVisible = true" type="primary" size="small">编辑</el-button>
                        </template>
                    </Info>
                </el-tab-pane>
                <el-tab-pane :label="personNum" name="second">
                    <TabsMainDetail type="person"/>
                    <div class="contentTable ffffff ">
                        <UnitTable type="companyDetail"></UnitTable>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="相关合同" name="third">
                    <TabsMainDetail type="pact"/>

                    <div style="height:2px;background-color: #F5F6F7;"></div>
                    <div class="contentPact ffffff">
                        <PactTable type="companyDetail"></PactTable>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        
        <el-dialog title="添加企业" :visible.sync="dialogFormVisible"  width="560px">
            <el-form :model="form">
                <el-form-item required label="企业名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" placeholder="请输入企业名称" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="法人" :label-width="formLabelWidth">
                    <el-input v-model="form.name" placeholder="请输入法人" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item required label="统一社会信用代码" :label-width="formLabelWidth">
                    <el-input v-model="form.name" placeholder="请输入统一社会信用代码" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input 
                        maxlength="200" 
                        type="textarea" 
                        v-model="form.name" 
                        placeholder="请输入备注" 
                        autocomplete="off"
                        show-word-limit
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import DetailNav from '../components/DetailNav.vue';
import Info from '../components/info.vue';
import TabsMainDetail from '../components/TabsMainDetail.vue';
import UnitTable from '../components/UnitTable.vue'
import PactTable from '../components/PactTable.vue'
import { oppositeDetail, } from '@/api/opposite'


export default {
    data(){
        return{
            
            dialogFormVisible: false,
            formLabelWidth: '180px',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
            },

            activeName: 'first',
            dataAll:{},
            companyTitle:'郑州盒蚌精选食品有限公司',
            listid:"",
            personNum:"人员"
        }
    },
    components:{
        Info,
        DetailNav,
		TabsMainDetail,
        PactTable,
        UnitTable,
    },
    mounted(){
        if(this.$route.query.id){
            this.listid = this.$route.query.id
            this.getdetail()
        }
    },
    methods:{
        getdetail(){
            console.log(this.listid)
            oppositeDetail({id:this.listid, type: 1}).then(res=>{
                this.dataAll = res.result
                // this.personNum = "人员" + "("+ res.result.staffNum + ")"
            })
        },
        back(){
                this.$router.push({path:'/company'},()=>{})
            
        },

        handleClick(tab, event) {
            console.log(tab, event);
        },
    }
}
</script>

<style lang="scss" scoped>
.companyDetail{
    height: 100%;
    background-color: #fff;
}
</style>